<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>JavaScript工程项目的一系列最佳实践 | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="规范,最佳实践,">
  

  <meta name="description" content="来源于互联网  1.Git1.1 一些Git规则 这里有一套规则要牢记  在功能分支中执行开发工作  因为这样，所有的工作都是在专用的分支而不是在主分支上隔离完成的。它允许您提交多个 pull request 而不会导致混乱。您可以持续迭代提交，而不会使得那些很可能还不稳定而且还未完成的代码污染 master 分支  从 develop 独立出分支  这样，您可以保持 master 分支中的代码">
<meta name="keywords" content="规范,最佳实践">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript工程项目的一系列最佳实践">
<meta property="og:url" content="http://blog.poetries.top/2018/01/28/js-perfect-rules/index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="来源于互联网  1.Git1.1 一些Git规则 这里有一套规则要牢记  在功能分支中执行开发工作  因为这样，所有的工作都是在专用的分支而不是在主分支上隔离完成的。它允许您提交多个 pull request 而不会导致混乱。您可以持续迭代提交，而不会使得那些很可能还不稳定而且还未完成的代码污染 master 分支  从 develop 独立出分支  这样，您可以保持 master 分支中的代码">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2020-08-15T04:25:31.926Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="JavaScript工程项目的一系列最佳实践">
<meta name="twitter:description" content="来源于互联网  1.Git1.1 一些Git规则 这里有一套规则要牢记  在功能分支中执行开发工作  因为这样，所有的工作都是在专用的分支而不是在主分支上隔离完成的。它允许您提交多个 pull request 而不会导致混乱。您可以持续迭代提交，而不会使得那些很可能还不稳定而且还未完成的代码污染 master 分支  从 develop 独立出分支  这样，您可以保持 master 分支中的代码">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-Git"><span class="toc-text">1.Git</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-1-一些Git规则"><span class="toc-text">1.1 一些Git规则</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-Git-工作流"><span class="toc-text">1.2 Git 工作流</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-3-如何写好-Commit-Message"><span class="toc-text">1.3 如何写好 Commit Message</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-文档"><span class="toc-text">2. 文档</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-环境"><span class="toc-text">3. 环境</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#3-1-一致的开发环境"><span class="toc-text">3.1 一致的开发环境</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-2-依赖一致性"><span class="toc-text">3.2 依赖一致性</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-依赖"><span class="toc-text">4. 依赖</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-测试"><span class="toc-text">5. 测试</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-结构布局与命名"><span class="toc-text">6. 结构布局与命名</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-代码风格"><span class="toc-text">7. 代码风格</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#7-1-若干个代码风格指导"><span class="toc-text">7.1 若干个代码风格指导</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-2-强制的代码风格标准"><span class="toc-text">7.2 强制的代码风格标准</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-日志"><span class="toc-text">8. 日志</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-API"><span class="toc-text">9. API</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#9-1-API-设计"><span class="toc-text">9.1 API 设计</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-2-API-安全"><span class="toc-text">9.2 API 安全</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-3-API-文档"><span class="toc-text">9.3 API 文档</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-证书"><span class="toc-text">10. 证书</span></a></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-js-perfect-rules" class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">JavaScript工程项目的一系列最佳实践</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2018.01.28</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/Front-End/">Front-End</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 8.2k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 29分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <blockquote>
<p>来源于互联网</p>
</blockquote>
<h2 id="1-Git"><a href="#1-Git" class="headerlink" title="1.Git"></a>1.Git</h2><h3 id="1-1-一些Git规则"><a href="#1-1-一些Git规则" class="headerlink" title="1.1 一些Git规则"></a>1.1 一些Git规则</h3><blockquote>
<p>这里有一套规则要牢记</p>
</blockquote>
<p><strong>在功能分支中执行开发工作</strong></p>
<ul>
<li>因为这样，所有的工作都是在专用的分支而不是在主分支上隔离完成的。它允许您提交多个 <code>pull request</code> 而不会导致混乱。您可以持续迭代提交，而不会使得那些很可能还不稳定而且还未完成的代码污染 <code>master</code> 分支</li>
</ul>
<p><strong>从 <code>develop</code> 独立出分支</strong></p>
<ul>
<li>这样，您可以保持 <code>master</code> 分支中的代码稳定性，这样就不会导致构建问题，并且几乎可以直接用于发布</li>
</ul>
<p><strong>永远也不要将分支（直接）推送到 develop 或者 master<br>，请使用合并请求（Pull Request）</strong></p>
<ul>
<li>通过这种方式，它可以通知整个团队他们已经完成了某个功能的开发。这样开发伙伴就可以更容易对代码进行 code review，同时还可以互相讨论所提交的需求功能</li>
</ul>
<p><strong>在推送所开发的功能并且发起合并请求前，请更新您本地的develop分支并且完成交互式变基操作（interactive rebase）</strong></p>
<ul>
<li>ebase 操作会将（本地开发分支）合并到被请求合并的分支（ master 或 develop ）中，并将您本地进行的提交应用于所有历史提交的最顶端，而不会去创建额外的合并提交（假设没有冲突的话），从而可以保持一个漂亮而干净的历史提交记录</li>
</ul>
<p><strong>请确保在变基并发起合并请求之前解决完潜在的冲突</strong></p>
<ul>
<li>合并分支后删除本地和远程功能分支<ul>
<li>如果不删除需求分支，大量僵尸分支的存在会导致分支列表的混乱。而且该操作还能确保有且仅有一次合并到master 或 develop。只有当这个功能还在开发中时对应的功能分支才存在</li>
</ul>
</li>
</ul>
<p><strong>在进行合并请求之前，请确保您的功能分支可以成功构建，并已经通过了所有的测试（包括代码规则检查）</strong></p>
<ul>
<li>因为您即将将代码提交到这个稳定的分支。而如果您的功能分支测试未通过，那您的目标分支的构建有很大的概率也会失败。此外，确保在进行合并请求之前应用代码规则检查。因为它有助于我们代码的可读性，并减少格式化的代码与实际业务代码更改混合在一起导致的混乱问题</li>
</ul>
<p><strong>使用 这个 <code>.gitignore</code>文件</strong></p>
<ul>
<li>此文件已经囊括了不应该和您开发的代码一起推送至远程仓库（remote repository）的系统文件列表。另外，此文件还排除了大多数编辑器的设置文件夹和文件，以及最常见的（工程开发）依赖目录</li>
</ul>
<p><strong>保护您的 develop 和 master 分支</strong></p>
<ul>
<li>这样可以保护您的生产分支免受意外情况和不可回退的变更</li>
</ul>
<h3 id="1-2-Git-工作流"><a href="#1-2-Git-工作流" class="headerlink" title="1.2 Git 工作流"></a>1.2 Git 工作流</h3><blockquote>
<p>基于以上原因, 我们将 功能分支工作流 ， 交互式变基的使用方法 结合一些 Gitflow中的基础 (比如，命名和使用一个develop branch)一起使用。 主要步骤如下</p>
</blockquote>
<p><strong>针对一个新项目, 在您的项目目录初始化您的项目。 如果是（已有项目）随后的功能开发/代码变动，这一步请忽略</strong></p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">cd &lt;项目目录&gt;</span><br><span class="line">git init</span><br></pre></td></tr></table></figure>
<p><strong>检出（Checkout） 一个新的功能或故障修复（feature/bug-fix）分支</strong></p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">git checkout -b &lt;分支名称&gt;</span><br></pre></td></tr></table></figure>
<p><strong>新增代码变更</strong></p>
<blockquote>
<p>git commit -a 会独立启动一个编辑器用来编辑您的说明信息，这样的好处是可以专注于写这些注释说明</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">git add</span><br><span class="line">git commit -a</span><br></pre></td></tr></table></figure>
<p><strong>（切换至功能分支并且）通过交互式变基从您的develop分支中获取最新的代码提交，以更新您的功能分支</strong></p>
<blockquote>
<p>您可以使用 –autosquash 将所有提交压缩到单个提交。没有人会愿意（看到） develop 分支中的单个功能开发就占据如此多的提交历史</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">git checkout &lt;branchname&gt;</span><br><span class="line">git rebase -i --autosquash develop</span><br></pre></td></tr></table></figure>
<p><strong>如果没有冲突请跳过此步骤，如果您有冲突, 就需要解决它们并且继续变基操作</strong></p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">git add &lt;file1&gt; &lt;file2&gt; ...</span><br><span class="line">git rebase --continue</span><br></pre></td></tr></table></figure>
<p><strong>推送您的（功能）分支。变基操作会改变提交历史, 所以您必须使用 -f 强制推送到远程（功能）分支。 如果其他人与您在该分支上进行协同开发，请使用破坏性没那么强的 –force-with-lease 参数</strong></p>
<blockquote>
<p>当您进行 rebase 操作时，您会改变功能分支的提交历史。这会导致 Git 拒绝正常的 git push 。那么，您只能使用 -f 或 –force 参数了</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">git push -f</span><br></pre></td></tr></table></figure>
<p><strong>提交一个合并请求（Pull Request）</strong></p>
<p><strong>Pull Request 会被负责代码审查的同事接受，合并和关闭</strong></p>
<p><strong>如果您完成了开发，请记得删除您的本地分支。</strong></p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">git branch -d &lt;分支&gt;</span><br></pre></td></tr></table></figure>
<p><strong>（使用以下代码）删除所有已经不在远程仓库维护的分支</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">git fetch -p &amp;&amp; <span class="keyword">for</span> branch <span class="keyword">in</span> <span class="string">`git branch -vv | grep ': gone]' | awk '&#123;print $1&#125;'`</span>; <span class="keyword">do</span> git branch -D $branch; done</span><br></pre></td></tr></table></figure>
<h3 id="1-3-如何写好-Commit-Message"><a href="#1-3-如何写好-Commit-Message" class="headerlink" title="1.3 如何写好 Commit Message"></a>1.3 如何写好 Commit Message</h3><blockquote>
<p>坚持遵循关于提交的标准指南，会让在与他人合作使用 Git 时更容易。这里有一些经验法则 </p>
</blockquote>
<p><strong>用新的空行将标题和主体两者隔开</strong></p>
<blockquote>
<p>Git 非常聪明，它可将您提交消息的第一行识别为摘要。实际上，如果您尝试使用 git shortlog ，而不是 git log ，您会看到一个很长的提交消息列表，只会包含提交的 id 以及摘要（，而不会包含主体部分）</p>
</blockquote>
<p><strong>将标题行限制为50个字符，并将主体中一行超过72个字符的部分折行显示</strong></p>
<blockquote>
<p>提交应尽可能简洁明了，而不是写一堆冗余的描述</p>
</blockquote>
<p><strong>标题首字母大写</strong></p>
<p><strong>不要用句号结束标题</strong></p>
<p><strong>使用主体部分去解释 是什么 和 为什么 而不是 怎么做</strong></p>
<h2 id="2-文档"><a href="#2-文档" class="headerlink" title="2. 文档"></a>2. 文档</h2><ul>
<li>可以使用这个 模板 作为 <a href="https://github.com/wearehive/project-guidelines/blob/master/README.sample.md" target="_blank" rel="noopener">README （的一个参考）</a></li>
<li>对于具有多个存储库的项目，请在各自的 README 文件中提供它们的链接</li>
<li>随项目的进展，持续地更新 README</li>
<li>给您的代码添加详细的注释，这样就可以清楚每个主要部分的含义</li>
<li>不要把注释作为坏代码的借口。保持您的代码干净整洁</li>
<li>也不要把那些清晰的代码作为不写注释的借口</li>
<li>当代码更新，也请确保注释的同步更新</li>
</ul>
<h2 id="3-环境"><a href="#3-环境" class="headerlink" title="3. 环境"></a>3. 环境</h2><p><strong>如果需要，请分别定义 development, test 和 production 三个环境</strong></p>
<blockquote>
<p>不同的环境可能需要不同的数据、token、API、端口等。您可能需要一个隔离的 development 环境，它调用 mock 的 API，mock 会返回可预测的数据，使自动和手动测试变得更加容易。或者您可能只想在 production 环境中才启用 Google Analytics（分析）</p>
</blockquote>
<p><strong>依据不同的环境变量加载部署的相关配置，不要将这些配置作为常量添加到代码库中</strong></p>
<blockquote>
<ul>
<li>您会有令牌，密码和其他有价值的信息。这些配置应正确地从应用程序内部分离开来，这样代码库就可以随时独立发布，不会包含这些敏感配置信息</li>
<li>怎么做： 使用 .env 文件来存储环境变量，并将其添加到 .gitignore 中使得排除而不被提交（到仓库）。另外，再提交一个 .env.example 作为开发人员的参考配置。对于生产环境，您应该依旧以标准化的方式设置环境变量</li>
</ul>
</blockquote>
<p><strong>建议您在应用程序启动之前校验一下环境变量</strong> </p>
<blockquote>
<p>它可能会将其他人从上小时的故障排查中解救</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> joi = <span class="built_in">require</span>(<span class="string">'joi'</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> envVarsSchema = joi.object(&#123;  </span><br><span class="line">  NODE_ENV: joi.string()</span><br><span class="line">    .valid([<span class="string">'development'</span>, <span class="string">'production'</span>, <span class="string">'test'</span>, <span class="string">'provision'</span>])</span><br><span class="line">    .required(),</span><br><span class="line">  PORT: joi.number()</span><br><span class="line">    .required(),</span><br><span class="line">  LOGGER_LEVEL: joi.string()</span><br><span class="line">    .valid([<span class="string">'error'</span>, <span class="string">'warn'</span>, <span class="string">'info'</span>, <span class="string">'verbose'</span>, <span class="string">'debug'</span>, <span class="string">'silly'</span>])</span><br><span class="line">    .default(<span class="string">'info'</span>),</span><br><span class="line">  LOGGER_ENABLED: joi.boolean()</span><br><span class="line">    .truthy(<span class="string">'TRUE'</span>)</span><br><span class="line">    .truthy(<span class="string">'true'</span>)</span><br><span class="line">    .falsy(<span class="string">'FALSE'</span>)</span><br><span class="line">    .falsy(<span class="string">'false'</span>)</span><br><span class="line">    .default(<span class="literal">true</span>)</span><br><span class="line">&#125;).unknown()</span><br><span class="line">  .required()</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> &#123; error, <span class="attr">value</span>: envVars &#125; = joi.validate(process.env, envVarsSchema)  </span><br><span class="line"><span class="keyword">if</span> (error) &#123;  </span><br><span class="line">  <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">`Config validation error: <span class="subst">$&#123;error.message&#125;</span>`</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> config = &#123;  </span><br><span class="line">  env: envVars.NODE_ENV,</span><br><span class="line">  isTest: envVars.NODE_ENV === <span class="string">'test'</span>,</span><br><span class="line">  isDevelopment: envVars.NODE_ENV === <span class="string">'development'</span>,</span><br><span class="line">  logger: &#123;</span><br><span class="line">    level: envVars.LOGGER_LEVEL,</span><br><span class="line">    enabled: envVars.LOGGER_ENABLED</span><br><span class="line">  &#125;,</span><br><span class="line">  server: &#123;</span><br><span class="line">    port: envVars.PORT</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = config;</span><br></pre></td></tr></table></figure>
<h3 id="3-1-一致的开发环境"><a href="#3-1-一致的开发环境" class="headerlink" title="3.1 一致的开发环境"></a>3.1 一致的开发环境</h3><p><strong>在 package.json 里的 engines 中设置您的node版本</strong></p>
<ul>
<li>让其他人可以清晰的知道这个项目中用的什么node版本</li>
</ul>
<p><strong>另外，使用 nvm 并在您的项目根目录下创建一个 .nvmrc 文件。不要忘了在文档中标注</strong></p>
<blockquote>
<p>任何使用nvm的人都可以使用 nvm use 来切换到合适的node版本</p>
</blockquote>
<p><strong>最好设置一个检查 <code>node</code> 和 <code>npm</code> 版本的 <code>preinstall</code> 脚本</strong></p>
<blockquote>
<p>某些依赖项可能会在新版本的 npm 中安装失败。</p>
</blockquote>
<p><strong>如果可以的话最好使用 Docker 镜像</strong></p>
<blockquote>
<p>它可以在整个工作流程中为您提供一致的环境，而且不用花太多的时间来解决依赖或配置</p>
</blockquote>
<p><strong>使用本地模块，而不是使用全局安装的模块</strong></p>
<blockquote>
<p>您不能指望您的同事在自己的全局环境都安装了相应的模块，本地模块可以方便您分享您的工具</p>
</blockquote>
<h3 id="3-2-依赖一致性"><a href="#3-2-依赖一致性" class="headerlink" title="3.2 依赖一致性"></a>3.2 依赖一致性</h3><p><strong>确保您的团队成员获得与您完全相同的依赖。</strong></p>
<blockquote>
<ul>
<li>因为您希望代码在任何开发环境中运行都能像预期的一样</li>
<li>在<code>npm@5</code>或者更高版本中使用 <code>package-lock.json</code></li>
</ul>
</blockquote>
<ul>
<li><p>我们没有 <code>npm@5</code></p>
<ul>
<li>或者，您可以使用 <code>yarn</code> ，并确保在 <code>README.md</code> 中标注了使用 yarn 。您的锁文件和<code>package.json</code>在每次依赖关系更新后应该具有相同的版本</li>
</ul>
</li>
<li><p>我不太喜欢 <code>Yarn</code></p>
<ul>
<li>不喜欢 <code>Yarn</code>，太糟糕了。对于旧版本的<code>npm</code>，在安装新的依赖关系时使用 <code>-save --save-exact</code> ，并在发布之前创建<code>npm-shrinkwrap.json</code></li>
</ul>
</li>
</ul>
<h2 id="4-依赖"><a href="#4-依赖" class="headerlink" title="4. 依赖"></a>4. 依赖</h2><p><strong>持续跟踪您当前的可用依赖包: 举个例子, <code>npm ls --depth=0</code></strong></p>
<p><strong>查看这些软件包是否未使用或者与开发项目无关: depcheck</strong></p>
<blockquote>
<p>您可能会在代码中包含未使用的库，这会增大生产包的大小。请搜索出这些未使用的依赖关系并去掉它们吧</p>
</blockquote>
<p><strong>在使用依赖之前，请检查他的下载统计信息，看看它是否被社区大量使用： npm-stat</strong></p>
<blockquote>
<p>更多的使用量很大程度上意味着更多的贡献者，这通常意味着拥有更好的维护，这些能确保错误能够被快速地发现并修复</p>
</blockquote>
<p><strong>在使用依赖之前，请检查它是否具有良好而成熟的版本发布频率与大量的维护者：例如， npm view async</strong></p>
<blockquote>
<p>如果维护者没有足够快地合并修补程序，那么这些贡献者也将会变得不积极不高效</p>
</blockquote>
<p><strong>如果需要使用那些不太熟悉的依赖包，请在使用之前与团队进行充分讨论</strong></p>
<p><strong>始终确保您的应用程序在最新版本的依赖包上面能正常运行，而不是无法使用：npm outdated</strong></p>
<blockquote>
<p>依赖关系更新有时包含破坏性更改。当显示需要更新时，请始终先查看其发行说明。并逐一地更新您的依赖项，如果出现任何问题，可以使故障排除更容易。可以使用类似 npm-check-updates 的酷炫工具</p>
</blockquote>
<h2 id="5-测试"><a href="#5-测试" class="headerlink" title="5. 测试"></a>5. 测试</h2><p><strong>如果需要，请构建一个 test 环境.</strong></p>
<blockquote>
<p>虽然有时在 production 模式下端到端测试可能看起来已经足够了，但有一些例外：比如您可能不想在生产环境下启用数据分析功能，只能用测试数据来填充（污染）某人的仪表板。另一个例子是，您的API可能在 production 中才具有速率限制，并在请求达到一定量级后会阻止您的测试请求</p>
</blockquote>
<p><strong>将测试文件放在使用 <em> .test.js 或 </em> .spec.js 命名约定的测试模块，比如 moduleName.spec.js</strong></p>
<blockquote>
<p>您肯定不想进入一个层次很深的文件夹结构来查找里面的单元测试</p>
</blockquote>
<p><strong>将其他测试文件放入独立的测试文件夹中以避免混淆</strong></p>
<blockquote>
<p>一些测试文件与任何特定的文件实现没有特别的关系。您只需将它放在最有可能被其他开发人员找到的文件夹中：<strong>test</strong> 文件夹。这个名字：<strong>test</strong>也是现在的标准，被大多数JavaScript测试框架所接受</p>
</blockquote>
<p><strong>编写可测试代码，避免副作用（side effects），提取副作用，编写纯函数</strong></p>
<ul>
<li>您想要将业务逻辑拆分为单独的测试单元。您必须“尽量减少不可预测性和非确定性过程对代码可靠性的影响”</li>
<li>纯函数是一种总是为相同的输入返回相同输出的函数。相反地，不纯的函数是一种可能会有副作用，或者取决于来自外部的条件来决定产生对应的输出值的函数。这使得它不那么可预测</li>
</ul>
<p><strong>使用静态类型检查器</strong></p>
<ul>
<li>有时您可能需要一个静态类型检查器。它为您的代码带来一定程度的可靠性</li>
</ul>
<p><strong>先在本地 develop 分支运行测试，待测试通过后，再进行pull请求</strong></p>
<ul>
<li>您不想成为一个导致生产分支构建失败的人吧。在您的rebase之后运行测试，然后再将您改动的功能分支推送到远程仓库。</li>
</ul>
<p><strong>记录您的测试，包括在 README 文件中的相关说明部分</strong></p>
<ul>
<li>这是您为其他开发者或者 DevOps 专家或者 QA 或者其他如此幸运能和您一起协作的人留下的便捷笔记</li>
</ul>
<h2 id="6-结构布局与命名"><a href="#6-结构布局与命名" class="headerlink" title="6. 结构布局与命名"></a>6. 结构布局与命名</h2><p><strong>请围绕产品功能/页面/组件，而不是围绕角色来组织文件。此外，请将测试文件放在他们对应实现的旁边</strong></p>
<ul>
<li>不规范</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── controllers</span><br><span class="line">|   ├── product.js</span><br><span class="line">|   └── user.js</span><br><span class="line">├── models</span><br><span class="line">|   ├── product.js</span><br><span class="line">|   └── user.js</span><br></pre></td></tr></table></figure>
<ul>
<li>规范</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── product</span><br><span class="line">|   ├── index.js</span><br><span class="line">|   ├── product.js</span><br><span class="line">|   └── product.test.js</span><br><span class="line">├── user</span><br><span class="line">|   ├── index.js</span><br><span class="line">|   ├── user.js</span><br><span class="line">|   └── user.test.js</span><br></pre></td></tr></table></figure>
<blockquote>
<p>比起一个冗长的列表文件，创建一个单一责权封装的小模块，并在其中包括测试文件。将会更容易浏览，更一目了然</p>
</blockquote>
<p><strong>将其他测试文件放在单独的测试文件夹中以避免混淆</strong></p>
<ul>
<li>这样可以节约您的团队中的其他开发人员或DevOps专家的时间</li>
</ul>
<p><strong>使用 ./config 文件夹，不要为不同的环境制作不同的配置文件。</strong></p>
<blockquote>
<p>当您为不同的目的（数据库，API等）分解不同的配置文件;将它们放在具有容易识别名称（如 config ）的文件夹中才是有意义的。请记住不要为不同的环境制作不同的配置文件。这样并不是具有扩展性的做法，如果这样，就会导致随着更多应用程序部署被创建出来，新的环境名称也会不断被创建，非常混乱。 配置文件中使用的值应通过环境变量提供</p>
</blockquote>
<p><strong>将脚本文件放在./scripts文件夹中。包括 bash 脚本和 node 脚本。</strong></p>
<ul>
<li>很可能最终会出现很多脚本文件，比如生产构建，开发构建，数据库feeders，数据库同步等</li>
</ul>
<p><strong>将构建输出结果放在./build文件夹中。将build/添加到.gitignore中以便忽略此文件夹</strong></p>
<blockquote>
<p>命名为您最喜欢的就行，dist看起来也蛮酷的。但请确保与您的团队保持一致性。放置在该文件夹下的东西应该是已经生成（打包、编译、转换）或者被移到这里的。您产生什么编译结果，您的队友也可以生成同样的结果，所以没有必要将这些结果提交到远程仓库中。除非您故意希望提交上去。</p>
</blockquote>
<p><strong>文件名和目录名请使用 PascalCase camelCase 风格。组件请使用 PascalCase 风格</strong></p>
<p><strong>CheckBox/index.js 应该代表 CheckBox 组件，也可以写成 CheckBox.js ，但是不能写成冗长的 CheckBox/CheckBox.js 或 checkbox/CheckBox.js</strong></p>
<p><strong>理想情况下，目录名称应该和 index.js 的默认导出名称相匹配。</strong></p>
<ul>
<li>这样您就可以通过简单地导入其父文件夹直接使用您预期的组件或模块</li>
</ul>
<h2 id="7-代码风格"><a href="#7-代码风格" class="headerlink" title="7. 代码风格"></a>7. 代码风格</h2><h3 id="7-1-若干个代码风格指导"><a href="#7-1-若干个代码风格指导" class="headerlink" title="7.1 若干个代码风格指导"></a>7.1 若干个代码风格指导</h3><p><strong>对新项目请使用 Stage2 和更高版本的 JavaScript（现代化）语法。对于老项目，保持与老的语法一致，除非您打算把老的项目也更新为现代化风格</strong></p>
<ul>
<li>这完全取决于您的选择。我们使用转换器来使用新的语法糖。Stage2更有可能最终成为规范的一部分，而且仅仅只需经过小版本的迭代就会成为规范</li>
</ul>
<p><strong>在构建过程中包含代码风格检查</strong></p>
<ul>
<li>在构建时中断下一步操作是一种强制执行代码风格检查的方法。强制您认真对待代码。请确保在客户端和服务器端代码都执行代码检查</li>
</ul>
<p><strong>使用 ESLint - Pluggable JavaScript linter 去强制执行代码检查</strong></p>
<ul>
<li>我们个人很喜欢 eslint ，不强制您也喜欢。它拥有支持更多的规则，配置规则的能力和添加自定义规则的能力</li>
</ul>
<p><strong>针对 JavaScript 我们使用Airbnb JavaScript Style Guide , 更多请阅读。 请依据您的项目和您的团队选择使用所需的JavaScript 代码风格</strong></p>
<p><strong>当使用FlowType的时候，我们使用 ESLint的Flow样式检查规则。</strong></p>
<ul>
<li>Flow 引入了很少的语法，而这些语法仍然需要遵循代码风格并进行检查</li>
</ul>
<p><strong>使用 .eslintignore 将某些文件或文件夹从代码风格检查中排除</strong></p>
<ul>
<li>当您需要从风格检查中排除几个文件时，就再也不需要通过 eslint-disable 注释来污染您的代码了</li>
</ul>
<p><strong>在Pull Request之前，请删除任何 eslint 的禁用注释</strong></p>
<ul>
<li>在处理代码块时禁用风格检查是正常现象，这样就可以关注在业务逻辑。请记住把那些 eslint-disable 注释删除并遵循风格规则</li>
</ul>
<p><strong>根据任务的大小使用 //TODO： 注释或做一个标签（ticket）</strong></p>
<blockquote>
<p>这样您就可以提醒自己和他人有这样一个小的任务需要处理（如重构一个函数或更新一个注释）。对于较大的任务，可以使用由一个lint规则（no-warning-comments）强制要求其完成（并移除注释）的//TODO（＃3456），其中的#3456号码是一个标签（ticket），方便查找且防止相似的注释堆积导致混乱</p>
</blockquote>
<p><strong>随着代码的变化，始终保持注释的相关性。删除那些注释掉的代码块</strong></p>
<ul>
<li>代码应该尽可能的可读，您应该摆脱任何分心的事情。如果您在重构一个函数，就不要注释那些旧代码，直接把要注释的代码删除吧</li>
</ul>
<p><strong>避免不相关的和搞笑的的注释，日志或命名</strong></p>
<p><strong>请使用有意义容易搜索的命名，避免缩写名称。对于函数使用长描述性命名。功能命名应该是一个动词或动词短语，需要能清楚传达意图的命名。</strong></p>
<p><strong>依据《代码整洁之道》的step-down规则，对您的源代码文件中的函数（的声明）进行组织。高抽象级别的函数（调用了低级别函数的函数）在上，低抽象级别函数在下，（保证了阅读代码时遇到未出现的函数仍然是从上往下的顺序，而不会打断阅读顺序地往前查找并且函数的抽象层次依次递减）。</strong></p>
<h3 id="7-2-强制的代码风格标准"><a href="#7-2-强制的代码风格标准" class="headerlink" title="7.2 强制的代码风格标准"></a>7.2 强制的代码风格标准</h3><p><strong>让您的编辑器提示您关于代码风格方面的错误。 请将 <a href="https://github.com/prettier/eslint-plugin-prettier" target="_blank" rel="noopener">eslint-plugin-prettier</a> 与 <a href="https://github.com/prettier/eslint-config-prettier" target="_blank" rel="noopener">eslint-config-prettier</a> 和您目前的ESLint配置一起搭配使用</strong></p>
<p><strong>考虑使用Git钩子</strong></p>
<ul>
<li>Git的钩子能大幅度地提升开发者的生产力。在做出改变、提交、推送至暂存区或者生产环境的过程中（充分检验代码），再也不需要担心（推送的代码会导致）构建失败</li>
</ul>
<p><strong>将Git的precommit钩子与Prettier结合使用</strong></p>
<blockquote>
<p>虽然prettier自身已经非常强大，但是每次将其作为单独的一个npm任务去格式化代码，并不是那么地高效。 这正是lint-staged（还有husky）可以解决的地方。关于如何配置 lint-staged 请阅读这里 以及如何配置 husky 请阅读</p>
</blockquote>
<h2 id="8-日志"><a href="#8-日志" class="headerlink" title="8. 日志"></a>8. 日志</h2><p><strong>避免在生产环境中使用客户端的控制台日志</strong></p>
<ul>
<li>您在构建过程可以把（应该）它们去掉，但是请确保您在代码风格检查中提供了有关控制台日志的警告信息。</li>
</ul>
<p><strong>产出生产环境的可读生产日志记录。一般使用在生产模式下所使用的日志记录库 (比如 winston 或者 node-bunyan)。</strong></p>
<blockquote>
<p>它通过添加着色、时间戳、log到控制台或者文件中，甚至是夜以继日地轮流log到文件，来减少故障排除中那些令人不愉快的事情。</p>
</blockquote>
<h2 id="9-API"><a href="#9-API" class="headerlink" title="9. API"></a>9. API</h2><h3 id="9-1-API-设计"><a href="#9-1-API-设计" class="headerlink" title="9.1 API 设计"></a>9.1 API 设计</h3><ul>
<li>因为我们试图实施开发出结构稳健的 Restful 接口，让团队成员和客户可以简单而一致地使用它们</li>
<li>缺乏一致性和简单性会大大增加集成和维护的成本。这就是为什么API设计这部分会包含在这个文档中的原因</li>
</ul>
<p><strong>我们主要遵循资源导向的设计方式。它有三个主要要素：资源，集合和 URLs</strong></p>
<ul>
<li>资源具有数据，嵌套，和一些操作方法。</li>
<li>一组资源称为一个集合。</li>
<li><code>URL</code>标识资源或集合的线上位置</li>
</ul>
<blockquote>
<p>这是针对开发人员（您的主要API使用者）非常著名的设计方式。除了可读性和易用性之外，它还允许我们在无需了解API细节的情况下编写通用库和一些连接器</p>
</blockquote>
<ul>
<li>使用<code>kebab-case</code>（短横线分割）的<code>URL</code>。</li>
<li>在查询字符串或资源字段中使用<code>camelCase</code>模式。</li>
<li>在URL中使用多个<code>kebab-case</code>作为资源名称。</li>
<li>总是使用复数名词来命名指向一个集合的<code>url：/users</code></li>
</ul>
<blockquote>
<p>基本上，它可读性会更好，并可以保持URL的一致性。</p>
</blockquote>
<p><strong>在源代码中，将复数转换为具有列表后缀名描述的变量和属性</strong></p>
<blockquote>
<p>复数形式的URL非常好，但在源代码中使用它却很微妙而且容易出错，所以要小心谨慎。</p>
</blockquote>
<p><strong>坚持这样一个概念：始终以集合名起始并以标识符结束</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">/students/<span class="number">245743</span></span><br><span class="line">/airports/kjfk</span><br></pre></td></tr></table></figure>
<p><strong>避免这样的网址</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">GET /blogs/:blogId/posts/:postId/summary</span><br></pre></td></tr></table></figure>
<p><strong>这不是在指向资源，而是在指向属性。您完全可以将属性作为参数传递，以减少响应</strong></p>
<p><strong>URLs里面请尽量少用动词</strong></p>
<blockquote>
<p>因为如果您为每个资源操作使用一个动词，您很快就会维护一个很大的URL列表，而且没有一致的使用模式，这会使开发人员难以学习。此外，我们还要使用动词做别的事情</p>
</blockquote>
<p><strong>为非资源型请求使用动词。在这种情况下，您的API并不需要返回任何资源。而是去执行一个操作并返回执行结果。这些不是 CRUD（创建，查询，更新和删除）操作</strong></p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">/translate?text=Hallo</span><br></pre></td></tr></table></figure>
<blockquote>
<p>因为对于 CRUD，我们在资源或集合URL上使用 HTTP 自己带的方法。我们所说的动词实际上是指Controllers。您通常不会开发这些东西</p>
</blockquote>
<p><strong>请求体或响应类型如果是JSON，那么请遵循camelCase规范为JSON属性命名来保持一致性</strong></p>
<blockquote>
<p>这是一个 JavaScript 项目指南，其中用于生成JSON的编程语言以及用于解析JSON的编程语言被假定为 JavaScript</p>
</blockquote>
<p><strong>如何使用HTTP方法来操作CRUD功能</strong></p>
<ul>
<li><code>GET</code>: 查询资源的表示法</li>
<li><code>POST</code>: 创建一些新的资源或者子资源</li>
<li><code>PUT</code>: 更新一个存在的资源</li>
<li><code>PATCH</code>: 更新现有资源。它只更新所提供的字段，不管其他字段</li>
<li><code>DELETE</code>: 删除一个存在的资源</li>
</ul>
<p><strong>对于嵌套资源，请在URL中把他们的关系表现出来。例如，使用id将员工与公司联系起来</strong></p>
<blockquote>
<p>这是一种自然的方式，方便资源的认知</p>
</blockquote>
<ul>
<li><code>GET /schools/2/students</code> , 应该从学校2得到所有学生的名单</li>
<li><code>GET /schools/2/students/31</code> , 应该得到学生31的详细信息，且此学生属于学校2</li>
<li><code>DELETE /schools/2/students/31</code> , 应删除属于学校2的学生31</li>
<li><code>PUT /schools/2/students/31</code> , 应该更新学生31的信息，仅在资源URL上使用PUT方式，而不要用收集</li>
<li><code>POST /schools</code> , 应该创建一所新学校，并返回创建的新学校的细节。在集合<code>URL</code>上使用<code>POST</code></li>
</ul>
<p><strong>对于具有v前缀（v1，v2）的版本，使用简单的序数。并将其移到URL的左侧，使其具有最高的范围表述</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">http:<span class="comment">//api.domain.com/v1/schools/3/students</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>当您的 API 为第三方公开时，升级API会导致发生一些意料之外的影响，也可能导致使用您API的人无法使用您的服务和产品。而这时使用URL中版本化可以防止这种情况的发生</p>
</blockquote>
<p><strong>响应消息必须是自我描述的。一个很好的错误消息响应可能如下所示</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="string">"code"</span>: <span class="number">1234</span>,</span><br><span class="line">    <span class="string">"message"</span> : <span class="string">"Something bad happened"</span>,</span><br><span class="line">    <span class="string">"description"</span> : <span class="string">"More details"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>或验证错误:</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="string">"code"</span> : <span class="number">2314</span>,</span><br><span class="line">    <span class="string">"message"</span> : <span class="string">"Validation Failed"</span>,</span><br><span class="line">    <span class="string">"errors"</span> : [</span><br><span class="line">        &#123;</span><br><span class="line">            <span class="string">"code"</span> : <span class="number">1233</span>,</span><br><span class="line">            <span class="string">"field"</span> : <span class="string">"email"</span>,</span><br><span class="line">            <span class="string">"message"</span> : <span class="string">"Invalid email"</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            <span class="string">"code"</span> : <span class="number">1234</span>,</span><br><span class="line">            <span class="string">"field"</span> : <span class="string">"password"</span>,</span><br><span class="line">            <span class="string">"message"</span> : <span class="string">"No password provided"</span></span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>开发人员在使用这些由API​​构建的应用程序时，难免会需要在故障排除和解决问题的关键时刻使用到这些精心设计的错误消息。好的错误消息设计能节约大量的问题排查时间</li>
<li>_注意：尽可能保持安全异常消息的通用性。例如，别说不正确的密码，您可以换成无效的用户名或密码，以免我们不知不觉地通知用户他的用户名确实是正确的，只有密码不正确。这会让用户很懵逼。</li>
</ul>
<p><strong>只使用这8个状态代码，并配合您自定义的响应描述来表述程序工作一切是否正常，客户端应用程序发生了什么错误或API发生错误</strong></p>
<ul>
<li><code>200 OK GET</code>, PUT 或 POST 请求响应成功.</li>
<li><code>201 Created</code> 标识一个新实例创建成功。当创建一个新的实例，请使用POST方法并返回201状态码。</li>
<li><code>304 Not Modified</code> 发现资源已经缓存在本地，浏览器会自动减少请求次数。</li>
<li><code>400 Bad Request</code> 请求未被处理，因为服务器不能理解客户端是要什么。</li>
<li><code>401 Unauthorized</code> 因为请求缺少有效的凭据，应该使用所需的凭据重新发起请求。</li>
<li><code>403 Forbidden</code> 意味着服务器理解本次请求，但拒绝授权。</li>
<li><code>404 Not Found</code> 表示未找到请求的资源。</li>
<li><code>500 Internal Server Error</code> 表示请求本身是有效，但由于某些意外情况，服务器无法实现，服务器发生了故障</li>
</ul>
<blockquote>
<p>大多数 API 提供程序仅仅只使用一小部分 HTTP 状态代码而已。例如，Google GData API 仅使用了10个状态代码，Netflix 使用了9个，而 Digg 只使用了8个。当然，这些响应作为响应主体的附加信息。一共有超过 70 个 HTTP 状态代码。然而，大多数开发者不可能全部记住这 70 个状态码。因此，如果您选择不常用的状态代码，您将使应用程序开发人员厌烦构建应用程序，然后您还要跑到维基百科上面找出您要告诉他们的内容，多累啊</p>
</blockquote>
<p><strong>在您的响应中提供资源的总数</strong></p>
<p><strong>接受limit和offset参数</strong></p>
<p><strong>还应考虑资源暴露的数据量。API消费者并不总是需要资源的完整表述。可以使用一个字段查询参数，该参数用逗号分隔的字段列表来包括</strong></p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">GET /student?fields=id,name,age,class</span><br></pre></td></tr></table></figure>
<p><strong>分页，过滤和排序功能并不需要从所有资源一开始就要得到支持。记录下那些提供过滤和排序的资源</strong></p>
<h3 id="9-2-API-安全"><a href="#9-2-API-安全" class="headerlink" title="9.2 API 安全"></a>9.2 API 安全</h3><blockquote>
<p>这些是一些基本的安全最佳实践</p>
</blockquote>
<p><strong>除非通过安全的连接（HTTPS），否则不要只使用基本认证。不要在URL中传输验证令牌：GET /users/123?token=asdf….</strong></p>
<blockquote>
<p>因为令牌、用户ID和密码通过网络是明文传递的（它是base64编码，而base64是可逆编码），所以基本认证方案是不安全的</p>
</blockquote>
<p><strong>必须使用授权请求头在每个请求上发送令牌：Authorization: Bearer xxxxxx, Extra yyyyy</strong></p>
<p><strong>授权代码应该是短暂的</strong></p>
<p><strong>通过不响应任何HTTP请求来拒绝任何非TLS请求，以避免任何不安全的数据交换。响应403 Forbidden的HTTP请求。</strong></p>
<p><strong>考虑使用速率限制</strong></p>
<blockquote>
<p>保护您的API免受每小时数千次的机器人扫描威胁。您应该在早期就考虑实施流控</p>
</blockquote>
<p><strong>适当地设置HTTP请求头可以帮助锁定和保护您的Web应用程序</strong></p>
<p><strong>您的API应将收到的数据转换为规范形式，或直接拒绝响应，并返回400错误请求（400 Bad Request）的错误，并在其中包含有关错误或丢失数据的详细信息</strong></p>
<p><strong>所有通过Rest API交换的数据必须由API来校验</strong></p>
<p><strong>序列化JSON</strong></p>
<blockquote>
<p>JSON编码器的一个关键问题是阻止任意的可执行代码在浏览器或在服务器中（如果您用nodejs的话）执行。您必须使用适当的JSON序列化程序对用户输入的数据进行正确编码，以防止在浏览器上执行用户提供的输入，这些输入可能会包含恶意代码，而不是正常的用户数据</p>
</blockquote>
<p><strong>验证内容类型，主要使用application/*.json（Content-Type 头字段）</strong></p>
<blockquote>
<p>例如，接受application/x-www-form-urlencodedMIME类型可以允许攻击者创建一个表单并触发一个简单的POST请求。服务器不应该假定Content-Type。缺少Content-Type请求头或异常的Content-Type请求头，应该让服务器直接以4XX响应内容去拒绝请求</p>
</blockquote>
<h3 id="9-3-API-文档"><a href="#9-3-API-文档" class="headerlink" title="9.3 API 文档"></a>9.3 API 文档</h3><ul>
<li>在README.md模板为 API 填写 API Reference 段落。</li>
<li>尽量使用示例代码来描述 API 授权方法</li>
<li>解释 URL 的结构（仅 path，不包括根 URL），包括请求类型（方法）</li>
</ul>
<blockquote>
<p>对于每个端点（endpoint）说明</p>
</blockquote>
<p><strong>如果存在 URL 参数就使用 URL 参数，并根据URL中使用到的名称来指定它们</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Required: id=[integer]</span><br><span class="line">Optional: photo_id=[alphanumeric]</span><br></pre></td></tr></table></figure>
<p><strong>如果请求类型为 POST，请提供如何使用的示例。上述的URL参数规则在这也可以适用。分为可选和必需</strong></p>
<p><strong>响应成功，应该对应什么样的状态代码，返回了哪些数据？当人们需要知道他们的回调应该是期望的样子，这很有用</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">Code: <span class="number">200</span></span><br><span class="line">Content: &#123; <span class="attr">id</span> : <span class="number">12</span> &#125;</span><br></pre></td></tr></table></figure>
<p><strong>错误响应，大多数端点都存在许多失败的可能。从未经授权的访问到错误参数等。所有的（错误描述信息）都应该列在这里。虽然有可能会重复，但它却有助于防止别人的猜想（，减少使用时的排错时间）。例如</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="string">"code"</span>: <span class="number">403</span>,</span><br><span class="line">    <span class="string">"message"</span> : <span class="string">"Authentication failed"</span>,</span><br><span class="line">    <span class="string">"description"</span> : <span class="string">"Invalid username or password"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>使用API​​设计工具，有很多开源工具可用于提供良好的文档</strong></p>
<h2 id="10-证书"><a href="#10-证书" class="headerlink" title="10. 证书"></a>10. 证书</h2><blockquote>
<p>确保您有权使用的这些资源。如果您使用其中的软件库，请记住先查询MIT，Apache或BSD（以更好地了解您所能够拥有的权限），但如果您打算修改它们，请查看许可证详细信息。图像和视频的版权可能会导致法律问题</p>
</blockquote>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2018/01/27/editconfig/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2018/02/02/vsc-config/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
